<template>
  <div class="dropdown" @click="perentClick">
    <div class="dropdown-label" @click="expendClick">{{ label }}</div>
    <div class="dropdown-content" v-if="visable && options.length > 0">
      <div
        class="dropdown-item"
        @click="itemClick(item)"
        v-for="(item, index) in options"
        :key="index"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const emit = defineEmits(['itemClick'])
let a = 0
const props = defineProps({
  label: {
    type: String,
    default: 'Dropdown'
  },
  options: {
    type: Array,
    default: () => []
  }
})
const visable = ref(false)

const itemClick = (param) => {
  a = a + 1
  visable.value = false
  console.log('a', a)
  emit('itemClick', param)
}
onMounted(() => {
  document.addEventListener('click', (e) => {
    if (visable.value) {
      visable.value = false
    }
  })
})

const expendClick = () => {
  visable.value = !visable.value
}

const perentClick = (e) => {
  e.stopPropagation()
}
</script>

<style lang="scss" scoped>
.dropdown {
  position: relative;
  .dropdown-label {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;
    line-height: 13px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    &::after {
      content: '';
      display: block;
      width: 11px;
      height: 6px;
      background: url('@/assets/img/down.png') no-repeat center;
      background-size: 100% 100%;
    }
  }
  .dropdown-content {
    width: 260px;
    position: absolute;
    top: calc(100% + 15px);
    transform: translateX(-50%);
    background: rgba(4, 21, 21, 0.8);
    border-radius: 10px;
    border: 1px solid #07a680;
    z-index: 100;
    .dropdown-item {
      width: 100%;
      padding: 14px 0px;
      text-align: center;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      line-height: 13px;
      cursor: pointer;
    }
    & > .dropdown-item:not(:last-child) {
      border-bottom: 1px solid #07a680;
    }
  }
}
</style>
